<template>
  <el-table
      :data="CtableData"
      border
      style="width: 100%;margin-top: 30px">
    <el-table-column
        prop="date"
        label="商品图片"
        width="120">
      <template slot-scope="scope">
        <el-image :src="shoesData[scope.$index].simage"></el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="name"
        label="商品名称"
        width="180">
      <template slot-scope="scope">
        <span>{{ shoesData[scope.$index].sname }}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="sccomments"
        label="我的评价">
      <template slot-scope="scope">
        <div v-if="edit===false">
          <span>{{ CtableData[scope.$index].sccomments }}</span>
        </div>
        <div v-else>
          <el-input v-model="CtableData[scope.$index].sccomments"></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column
        prop="scscore"
        label="我的评分">
      <template slot-scope="scope">
        <el-rate
            v-if="disabled"
            v-model="CtableData[scope.$index].scscore"
            show-score
            disabled
            :colors="colors">
        </el-rate>
        <el-rate
            v-else
            v-model="CtableData[scope.$index].scscore"
            show-score
            :colors="colors">
        </el-rate>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            v-if="edit===false"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
            v-else
            size="mini"
            type="primary"
            @click="save(scope.$index, scope.row)">保存
        </el-button>
        <el-popconfirm
            @confirm="handleDelete(scope.$index, scope.row)"
            title="确定删除？"
        >
          <el-button
              size="mini"
              type="danger"
              slot="reference"
              style="margin-left: 10px"
          >删除
          </el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "comments",
  data() {
    return {
      edit: false,
      CtableData: [],
      disabled: true,
      shoesData: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      scscore: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    }
  },
  mounted() {
    this.load()
    this.getShoes()
  },
  methods: {
    load() {
      axios.get("/comment/getComment?uid=" + this.user.uid).then(res => {
        if (res.data.code === 200) {
          this.CtableData = res.data.data
          localStorage.setItem("CtableData", JSON.stringify(this.CtableData))
          console.log(this.CtableData, "dfsgsdfgsdfsdgdsg")
        } else {
          this.$message.error("出错了！")
        }
      })
    },
    getShoes() {
      console.log(this.CtableData)
      JSON.parse(localStorage.getItem("CtableData")).forEach((item, index) => {
        axios.post("/comment/getShoes?cid=" + item.cid).then(res => {
          this.shoesData.push(res.data.data)
        })
      })
      console.log(this.shoesData, "dfsgsdfgsdfsdgdsg")
    },
    handleEdit(index, row) {
      this.edit = !this.edit;
      this.disabled = false;
      console.log(index, row);
    },
    save(index, row) {
      this.edit = !this.edit;
      this.disabled = true;
      axios.post("/comment/save" ,row).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.load()
        }
      })
    },
    handleDelete(index, row) {
      axios.post("/comment/delete?id=" + this.CtableData[index].cid).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.load()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>